<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><?php echo $appTitle;?></title>
    <!-- easyui js -->
    <script type="text/javascript" src="/static/Easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/Easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/Easyui/jquery.edatagrid.js"></script>
    <script type="text/javascript" src="/static/Easyui/datagrid-detailview.js"></script>
    <script type="text/javascript" src="/static/Easyui/jquery.insdep-extend.min.js"></script>
    <script type="text/javascript" src="/static/Js/qiniu.min.js"></script>
    <script type="text/javascript" src="/static/Js/tools.js?ver=2.12"></script>
    <script type="text/javascript" src="/static/Js/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/static/Js/jquery.base64.js"></script>
    <script type="text/javascript" src="/static/Js/jquery.jqprint-0.3.js"></script>

    <!-- ueditor富文本编辑器 -->
    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/ueditor/ueditor.merchant.all.js"></script>
    <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js?ver=2.1"></script>
    <link type="text/css" href="/ueditor/themes/default/css/ueditor.css" rel="stylesheet"/>

    <!-- Vue&图表 -->
    <script type="text/javascript" src="/static/Js/vue.min.js"></script>
    <script type="text/javascript" src="/static/Js/echarts.min.js"></script>

    <!-- elementUI -->
    <link rel="stylesheet" href="/element/element.css">
    <script src="/element/element.js"></script>

    <!-- moment.js -->
    <script src="/Js/moment.js"></script>

    <!-- 图片浏览 -->
    <script type="text/javascript" src="/static/Easyui/plugin/lightbox-2.9.0/js/lightbox.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/Easyui/plugin/lightbox-2.9.0/css/lightbox.css">

    <!-- 特殊样式文件 -->
    <link rel="stylesheet" type="text/css" href="/static/Easyui/themes/2019/icon.css">
    <link rel="stylesheet" type="text/css" href="/static/Easyui/themes/2019/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/Easyui/themes/2019/css/default.css">
    <link rel="stylesheet" type="text/css" href="/static/Easyui/themes/2019/css/style/darkgrey.css" id="themeLink">
    <script type="text/javascript" src="/static/Easyui/themes/2019/js/common.js"></script>
    <script type="text/javascript" src="/static/Easyui/themes/2019/js/skin.js"></script>
    <script type="text/javascript" src="/static/Easyui/themes/2019/js/layer/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1544735_ba82h63337l.css">

    <!-- 页面装修相关 -->
    <script src="/Js/shopro/Sortable.min.js"></script>
    <script src="/Js/shopro/vuedraggable.js"></script>
    <script src="/Js/shopro/color-thief.js"></script>
    <script src="/Js/shopro/html2canvas.js"></script>
    <script src="/Js/shopro/fast.js"></script>
</head>
<body style="background-color: #f5f7f9;">
<div id="master-layout">

    <div data-options="region:'north',border:false,bodyCls:'master-header-layout'">
        <div class="header top">

            <div class="headtop">
                <span class="logo" id="logo" @click="homepage"><?php echo $appTitle;?></span>
                <ul class="nav">
                    <template v-for="(vo,index) in menus">
                        <li v-if="vo.id===menuUp"><a href="#" class="selected">{{vo.name}}</a></li>
                        <li v-else @click="changeMenu(vo)"><a href="#">{{vo.name}}</a></li>
                    </template>
                </ul>

                <div class="topright">
                    <div class="user">
                        <span style="background-color:#555">
                            <a href="#"><i class="iconfont icon-geren"></i> <?php echo $username;?><i style="font-size: 11px;" class="iconfont icon-xiala"></i></a>
                        </span>
                        <ul class="userlist">
                            <li><a href="javascript:" @click="addTab('个人信息', '/merchant/system/userinfo')"><i class="iconfont icon-rongna"></i> 用户信息</a></li>
<!--                            <li><a href="javascript:" @click="addTab('修改密码', '/merchant/index/changepwd')"><i class="iconfont icon-mima"></i> 修改密码</a></li>-->
                            <li><a href="javascript:" @click="merchantlogout()"><i class="iconfont icon-tuichu"></i> 退出</a></li>
                        </ul>
                    </div>
                    <div class="skin">
                        <a href="#">更新主题</a>
                        <ul class="skinlist">
                            <li><a href="#" data-value="black" class="targetElem black"></a></li>
                            <li><a href="#" data-value="green" class="targetElem green"></a></li>
                            <li><a href="#" data-value="darkblue" class="targetElem darkblue"></a></li>
                            <li><a href="#" data-value="orange" class="targetElem orange"></a></li>
                            <li><a href="#" data-value="lightgreen" class="targetElem lightgreen"></a></li>
                            <li><a href="#" data-value="darkgrey" class="targetElem darkgrey"></a></li>
                            <li><a href="#" data-value="lightblue" class="targetElem lightblue"></a></li>
                            <li><a href="#" data-value="red" class="targetElem red"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div data-options="region:'west',collapsed:false,split:true,border:false" style="width:205px;" :title="menus[0].name">
        <div data-options="fit:true,border:true" class="easyui-accordion left">
            <ul class="leftmenu navMenu">
                <template v-for="vo in menus">
                    <template v-for="vx in vo.submenu">
                        <li v-if="vx.up==menuUp" unselectable="on"  style="-moz-user-select:none;cursor: pointer;" @click="vx.flag=(vx.flag==1)?0:1">
                            <span v-if="vx.links==''&&vx.leafmenu&&vx.leafmenu.length>0"><i :class="'iconfont '+vx.icon"></i>{{vx.name}}
                                <template v-if="vx.flag==1">
                                <i style="float: right;font-size: 10px;" class="iconfont icon-xiala"></i>
                                </template>
                                <template v-else>
                                <i style="float: right;font-size: 10px;" class="iconfont icon-triangle-right"></i>
                                </template>
                            </span>
                            <a v-else-if="vx.name==currMenuName" class="selected" :href="vx.links" :title="vx.name" target="right"><i :class="'iconfont '+vx.icon"></i>{{vx.name}}</a>
                            <a v-else :href="vx.links" :title="vx.name" target="right"><i :class="'iconfont '+vx.icon"></i>{{vx.name}}</a>

                            <ul class="leafMenu" v-show="vx.flag==1">
                                <template v-for="vc in vx.leafmenu">
                                    <li v-if="vc.up==vx.id">
                                        <a v-if="vc.name==currMenuName" class="selected" :href="vc.links" :title="vc.name" target="right">{{vc.name}}</a>
                                        <a v-else :href="vc.links" :title="vc.name" target="right">{{vc.name}}</a>
                                    </li>
                                </template>
                            </ul>
                        </li>
                    </template>
                </template>
            </ul>
        </div>
    </div>

    <div data-options="region:'center',border:false" id="centerPanel" >
        <div id="rightTabs">
            <div title="首页" data-options="closable:false,href:'/merchant/index/main'"></div>
        </div>
    </div>

    <div id="mm" class="easyui-menu" style="width:160px;">
        <div id="mm-tabclose">关闭</div>
        <div id="mm-tabcloseall">全部关闭</div>
        <div id="mm-tabcloseother">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright">当前页右侧全部关闭</div>
        <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
        <div class="menu-sep"></div>
        <div id="mm-exit">退出</div>
    </div>
    <div id="blueimp-gallery" class="blueimp-gallery">
        <div class="slides"></div>
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
    </div>
    <div id="uploadBox" class="easyui-dialog" style="width:840px; height:560px;" title="选择图片" closed="true"></div>
</div>
</body>
</html>
<script>
    let resizeTimeout = null;
    $(function () {
        $('#master-layout').layout({
            fit: true
        });
        $('#rightTabs').tabs({
            border: false,
            fit: true,
            scrollDuration:200,
            onSelect: function (name) {
                clearTimeout(resizeTimeout);
                Vm.index.currMenuName = name;
                document.dispatchEvent(new CustomEvent('onResize', {
                    "detail": {
                        width: $('#centerPanel').width()
                    },
                    "bubbles": true,
                    "cancelable": false
                }));
            }
        });
        $(window).resize(function (e){
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(()=>{
                document.dispatchEvent(new CustomEvent('onResize', {
                    "detail": {
                        width: e.currentTarget.innerWidth
                    },
                    "bubbles": true,
                    "cancelable": false}));
            }, 400);
        });
        $('#centerPanel').panel({
            onResize(e){
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(()=>{
                    document.dispatchEvent(new CustomEvent('onResize', {
                        "detail": {
                            width: e
                        },
                        "bubbles": true,
                        "cancelable": false}));
                }, 400);
            }
        });
    });
    var Vm = {};
    Vm.index = new Vue({
        el: '#master-layout',
        data: {
            appTitle: '<?php echo $appTitle;?>',
            username: '<?php echo $username;?>',
            domain: '<?php echo $domain;?>',
            menus: JSON.parse('<?php echo json_encode($menus, JSON_UNESCAPED_UNICODE);?>'),
            menuUp: 1,
            currMenuName: '',
        },
        watch: {
            menuUp: function (newVal, oldVal) {
                Vm.index.menus.forEach(function (v, index) {
                    if (v.id === newVal) {
                        v.submenu.forEach(function (v1, index1) {
                            let flag = 0;
                            if (v1.leafmenu && v1.leafmenu.length > 0) {
                                v1.leafmenu.forEach(function (v2, index2) {
                                    if (v2.name === Vm.index.currMenuName) {
                                        flag = 1;
                                    }
                                });
                            }
                            Vm.index.menus[index].submenu[index1].flag = flag;
                        });
                    }
                });
            }
        },
        mounted(){
            this.init();
        },
        methods: {
            homepage(){
                addTab('首页');
            },
            init() {
                this.menuUp = this.menus[0].id;
            },
            changeMenu(vo) {
                Vm.index.menuUp = vo.id;
                $('#master-layout').layout('panel', 'west').panel('setTitle', vo.name);
                if($(".leftmenu").width()===0) {
                    $('#master-layout').layout('expand', 'west');
                }
            }
        },
        updated: function () {
            InitLeftMenu();
        }
    });
</script>
